import { useEffect } from 'react';
import { useSelector, useStore } from 'react-redux';

// import { findCinemas } from '@/api/MaiZuo';

import { fetchCinemaList } from '../redux/features/cinemaSlice';

// import { changeCinemaList } from '../redux/features/cinemaSlice';

// export const useCinemaList = () => {
//   const cityId = useSelector((state) => state.CityReducer.id);
//   const cityName = useSelector((state) => state.CityReducer.name);
//   const list = useSelector((state) => state.CinemaReducer.list);

//   const { dispatch } = useStore();

//   useEffect(() => {
//     list.length === 0 &&
//       findCinemas(cityId).then((res) => {
//         dispatch(changeCinemaList(res.cinemas));
//       });
//     return () => {};
//   }, [cityId, list.length, dispatch]);

//   return {
//     cityName,
//     list,
//   };
// };

export const useCinemaList = () => {
  const cityId = useSelector((state) => state.CityReducer.id);
  const cityName = useSelector((state) => state.CityReducer.name);
  const list = useSelector((state) => state.CinemaReducer.list);

  const { dispatch } = useStore();

  useEffect(() => {
    list.length === 0 && dispatch(fetchCinemaList(cityId));
    return () => {};
  }, [cityId, list.length, dispatch]);

  return {
    cityName,
    list,
  };
};
